<template>
  <div>
    <div class="card" style="margin-bottom: 10px;">
      <div style="font-weight: bold; font-size: 24px; margin-left: 10px">请选择更符合你的选项：</div>
    </div>
    
    <div class="card" style="margin-bottom: 10px">
      <el-table :data="data.tableData">
      <el-table-column prop="id" label="题号" width="100"></el-table-column>
      <el-table-column prop="question" label="题目" width="300"></el-table-column>
      <el-table-column prop="optiona" label="选项A"></el-table-column>
      <el-table-column prop="optionb" label="选项B"></el-table-column>
      <el-table-column prop="resulta" label="结果A" width="100"></el-table-column>
      <el-table-column prop="resultb" label="结果B" width="100"></el-table-column>
      </el-table>
    </div>
      <div class="card" >
        <div style="margin-bottom: 10px">当你选择好所有选项，把 8 项对应的（E、I、S、N、T、F、J、P）分别加起来，以四个组别来评估你的性格类型倾向：“E-I”“S-N”“T-F”和“J-P”。请你比较四个组别的得分。每个子别中，获得较高分数的那个类型，就是
        你的性格类型倾向，同分处理规则：假如 E=I,则为I，假如 S=N，则为N，假如T=F，则为F，假如J=P则为P</div>
        <el-button type="primary" class="el-button" @click="save">完成测试</el-button>
      </div>

    <el-dialog v-model="data.updateformVisible" title="请确认你的信息" width="500">
      <el-form :model="data.form" label-width="120px">
        <el-form-item label="学号">
          <el-input v-model="data.form.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="data.form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Mbti类型">
          <el-input v-model="data.form.mbti" autocomplete="off" />
        </el-form-item>
<!--        <el-form-item prop="role">-->
<!--          <el-select v-model="data.form.mbti" placeholder="请选择身份" @change="validateRole">-->
<!--            <el-option label="学生" value="Student"></el-option>-->
<!--            <el-option label="管理员" value="Admin"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="学院">
          <el-input v-model="data.form.college" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="data.form.speciality" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="data.form.classes" autocomplete="off" />
        </el-form-item>
<!--        <el-form-item label="测试时间">-->
<!--          <el-input v-model="data.form.time" autocomplete="off" />-->
<!--        </el-form-item>-->
        <el-form-item label="Activity time">
          <el-date-picker
              v-model="data.form.time"
              type="date"
              placeholder="Pick a date"
              clearable
          />
        </el-form-item>
        </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.updateformVisible = false">取消</el-button>
          <el-button type="primary" @click="update">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive} from 'vue';
import request from '@/utils/request';
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";

const data = reactive({
  tableData: [],
  formVisible: false,
  form:{},
  mbti:''
})

const handleSearch = () =>{
  request.get('/questions/listQuestion',{
        params: {
          keyword: ''
        }
      }
      ).then(res => {
    data.tableData = res.data || []
  }).catch(error => {
    console.error('Error fetching data:', error); // 输出错误信息
  });
}
//调用方法获取后台数据
handleSearch()

const save = () => {
  console.log('Clicked edit button')
  request.get('/result/userStudent',
      {
        params: {
          id: JSON.parse(localStorage.getItem('student-user') || "")
        }
      }).then(res => {
    console.log(res.data[0])
    data.form = res.data[0]
  }).catch(error => {
    console.error('Error fetching data:', error); // 输出错误信息
  });
  data.updateformVisible = true
}
const update = () => {
    request.put("/result/updateStudent", data.form).then(res => {
      if (res.code === '200') {
        handleSearch()   //重新获取数据
        ElMessage.success("操作成功")
        data.updateformVisible = false
        switch (data.form.mbti) {
          case 'infp':
            router.push('/infp');
            break;
          case 'intp':
            router.push('/intp');
            break;
          case 'intj':
            router.push('/intj');
            break;
          case 'intp':
            router.push('/intp');
            break;
          case 'istp':
            router.push('/istp');
            break;
          case 'isfp':
            router.push('/isfp');
            break;
          case 'istj':
            router.push('/istj');
            break;
          case 'isfj':
            router.push('/isfj');
            break;
          case 'entp':
            router.push('/entp');
            break;
          case 'estp':
            router.push('/estp');
            break;
          case 'esfp':
            router.push('/esfp');
            break;
          case 'enfp':
            router.push('/enfp');
            break;
          case 'entj':
            router.push('/entj');
            break;
          case 'esfj':
            router.push('/esfj');
            break;
          case 'estj':
            router.push('/estj');
            break;
          case 'esfj':
            router.push('/esfj');
            break;
        }
      } else {
        ElMessage.error("MBTI类型输入错误")
      }
    })
}
</script>